<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="user-scalable=no"/>
	<title>所有组件</title>
	<link rel="stylesheet" href="../common/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="../common/BingoTouch.css" /> 
	<script src="../common/iscroll.js"></script>
	<script src="../common/jquery-1.7.1.min.js"></script>
	<script src="../common/jquery.mobile-1.1.0.min.js"></script>
	<script src="../common/BingoTouch.js"></script>
</head>
<body>
<div data-role="page" class="container">
   <div data-role="content">
		<div class="header">
			<h1 class="title">Navbar</h1>
			<div class="header-left">
				<div class="btn-back" data-role="BTButton" data-url="home.html">返回</div>
			</div>
			<div class="header-right">
				<!-- 右边按钮区域 -->
			</div>
			<div class="navbar">
				<!-- 多1个按钮class=grid-d -->
				<ul class="grid-c" sonmenu="true" sonmenu-dir="bottom">
					<li>
						<div class="btn-primary btn-active" data-role="BTButton" data-icon="statics/images/icon-home.png" icon-dir="left" mouseup="false">首页</div>						
						<ul class="sonmenu">
							<li><div data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">Button1Button1</div>
							</li>
							<li><div data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top">Button2</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button3</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button4</div></li>
						</ul>
					</li>
					<li>
						<div class="btn-primary" data-role="BTButton" data-icon="statics/images/icon-list.png" icon-dir="left" mouseup="false">栏目</div>
						<ul class="sonmenu">
							<li><div data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">Button1Button1</div>
							</li>
							<li><div data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top">Button2</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button3</div></li>
						</ul>
					</li>
					<li><div class="btn-primary" data-role="BTButton" data-icon="statics/images/icon-setting.png" icon-dir="left" mouseup="false">设置</div></li>
				</ul>
			</div>			
		</div>
		<div class="content">
			<div class="content-inner">	
				<h2>1. 平分宽度的导航 -- ul结构</h2>
				grid-a grid-b 到 grid-h 代表 里面有1-8个菜单
				<!-- 导航条 -->
				ul class="grid-d"
				<div class="navbar">
					<ul class="grid-d">
						<li><div data-role="BTButton" mouseup="false">Button1Button1</div></li>
						<li><div data-role="BTButton" class="btn-active" mouseup="false">Button2</div></li>
						<li><div data-role="BTButton" mouseup="false">Button3</div></li>
						<li><div data-role="BTButton" mouseup="false">Button4</div></li>
					</ul>
				</div>
				<h2>2. 带图标导航栏</h2>	
				<!-- 导航条 -->
				<div class="navbar">
					<!-- 多1个按钮class=grid-d -->
					<ul class="grid-c">
						<li><div data-role="BTButton" class="btn-primary btn-active" data-icon="icon-arrow-up" icon-dir="top" mouseup="false">Button1Button1</div>
						</li>
						<li><div data-role="BTButton" class="btn-primary" data-icon="icon-arrow-down" icon-dir="bottom" mouseup="false">Button2</div></li>
						<li><div data-role="BTButton" class="btn-primary" data-icon="icon-arrow-left" icon-dir="left" mouseup="false">Button3</div></li>
					</ul>
				</div>	
				<h2>3. 二级导航菜单</h2>
				sonmenu="true" sonmenu-dir="bottom"		
				<div class="navbar">
				<!-- 多1个按钮class=grid-d -->
				<ul class="grid-c" sonmenu="true" sonmenu-dir="bottom">
					<li>
						<div class="btn-primary btn-active" data-role="BTButton" data-icon="icon-arrow-up" icon-dir="left" mouseup="false">Button1Button1</div>						
						<ul class="sonmenu">
							<li><div data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">Button1Button1</div>
							</li>
							<li><div data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top">Button2</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button3</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button4</div></li>
						</ul>
					</li>
					<li>
						<div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top" mouseup="false">Button2</div>
						<ul class="sonmenu">
							<li><div data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">Button1Button1</div>
							</li>
							<li><div data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top">Button2</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button3</div></li>
						</ul>
					</li>
					<li><div class="btn-primary" data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top" mouseup="false">Button3</div></li>
				</ul>
			</div>	
				<h2>4. 自适应内容型导航栏 -- table结构 </h2>
				<!-- 自适应型导航栏 -->
				<div class="navbar">
					<table>
						<tr>
							<td>
								<div data-role="BTButton" class="btn-primary btn-active" data-icon="icon-arrow-up" icon-dir="top" mouseup="false">Button1Button1</div>
							</td>
							<td>
								<div data-role="BTButton" class="btn-primary" data-icon="icon-arrow-down" icon-dir="bottom" mouseup="false">Button2</div>
							</td>
							<td>
								<div data-role="BTButton" class="btn-primary" data-icon="icon-arrow-left" icon-dir="left" mouseup="false">Button3</div>
							</td>
						</tr>
					</table>
				</div>
				
			</div>
		</div>
		<!-- 底部导航 -->
		<div class="footer">			
			<div class="navbar">
				<ul class="grid-d" sonmenu="true" sonmenu-dir="top">
					<li><div data-role="BTButton" class="btn-inverse btn-active" data-icon="statics/images/icon-home.png" icon-dir="top" mouseup="false">Button1Button1</div>
						<ul class="grid-d sonmenu">
							<li><div data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">Button1Button1 <span class="angle"></span></div>
							</li>
							<li><div data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top">Button2</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button3</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button4</div></li>
						</ul>
					</li>
					<li><div data-role="BTButton" class="btn-inverse" data-icon="statics/images/icon-list.png" icon-dir="top" mouseup="false">Button2</div>
						<ul class="grid-c sonmenu">
							<li><div data-role="BTButton" data-icon="icon-arrow-up" icon-dir="top">Button1Button1</div>
							</li>
							<li><div data-role="BTButton" data-icon="icon-arrow-down" icon-dir="top">Button2</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button3</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button4</div></li>
							<li><div data-role="BTButton" data-icon="icon-arrow-left" icon-dir="top">Button5</div></li>
						</ul>
					</li>
					<li><div data-role="BTButton" class="btn-inverse" data-icon="statics/images/icon-search.png" icon-dir="top" mouseup="false">Button3</div></li>
					<li><div data-role="BTButton" class="btn-inverse" data-icon="statics/images/icon-setting.png" icon-dir="top" mouseup="false">Button4</div></li>
				</ul>
			</div>
		</div>
	</div>
</div>
</body>
</html>